<template>
  <div style="width: 24%; margin: 10px auto; order-radius: 20px; ">
    <div style="background-color: white; padding: 10px; border: 1px solid #ccc; border-radius: 10px; height: 525px; ">
      <!--  列表标题-->
      <div style="margin: 10px 0; color: SlateBlue; font-size: 16px">
        <el-icon style="vertical-align: middle;"><UserFilled/></el-icon>
        <b style="padding-left: 10px">好友列表 </b>
      </div>

      <!--  好友列表-->
      <div style="flex: 1; color: SlateBlue; border: 1px solid #ccc;  height: 450px;  font-size: 10px;overflow-y: scroll; border-radius: 3%">
        <!--  动态获取好友-->
        <div style="padding: 6px; border: 1px solid #ccc; " v-for="(item,index) in state.addfriends" :key="index" :class="{'left-list' : active == item.id}" @click="startCall(item)" >
          <div style="display:flex;" >
            <img style="width: 40px; height: 40px; margin-right: 20px; border-radius: 50%"
                 :src="item.user.avatar"
                 alt="">
            <div style="flex: 1; line-height: 20px">
              <div style="font-weight: bold"> {{ item.user.username }} </div>
              <div style="font-size: 12px; color: #999">{{ item.user.address}}</div>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
  <div style="width: 59%; margin: 10px auto">
  <div ref="divRef"
       style="background-color: rgb(247,247,247); border: 1px solid #ccc; border-radius: 10px;overflow-y: scroll;
       padding: 20px;  height: 525px;  ">
    <!-- 顶部-->
    <div>
      <div style=" color: SlateBlue; font-size: 17px;">
        <el-icon style="vertical-align: middle;"><ZoomIn /></el-icon>
        <b style="padding-left: 5px; " >添加好友</b>
      </div>
      <el-input v-model="username" placeholder="请输入名称" class="w440"/>
      <el-button @click="load" class="ml5"  type="primary">搜索</el-button>
    </div>

    <!-- 查找结果 -->
    <div  style="background-color:white;margin-top: 15px; border-radius: 3%;height: 200px;overflow-y: scroll;">
      <!--  好友1-->
      <div style="padding: 6px; border: 1px solid #ccc;" v-for="(item,index) in  state.tableData " :key="index"  >
        <div style="display:flex;" >
            <img style="width: 40px; height: 40px; margin-right: 20px; border-radius: 50%"
                 :src="item.avatar" alt="">
            <div style="font-weight: bold; margin-top: 10px;width: 280px">  {{ item.username }} </div>
          <div>
            <el-button  type="success" @click="addUser(index,item.id)">添加</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-divider></el-divider>

    <!-- 添加结果 -->
    <div  style="background-color:white;margin-top: 15px; border-radius: 3%;height: 150px;overflow-y: scroll;">
      <!--  好友1-->
      <div style="padding: 6px; border: 1px solid #ccc;" v-for="(item,index) in  state.applyfriends" :key="index"  >
        <div style="display:flex;" >
          <img style="width: 40px; height: 40px; margin-right: 20px; border-radius: 50%" :src="item.user.avatar" alt="">
          <div style="font-weight: bold; margin-top: 10px;"> {{ item.user.username }}</div>
          <el-button @click="accept(index,item.id)" style="margin-top: 10px;margin-left: 200px" type="success" > 同意 </el-button>
          <el-button @click="refuse(index,item.id)" style="margin-top: 10px;" type="danger" > 拒绝 </el-button>
        </div>
      </div>
    </div>

    </div>

  </div>
</template>

<script setup>

import {ref, reactive, onMounted, nextTick} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";


  const username = ref('')
  const address = ref('')
  const active = ref('');

  const state = reactive({
    tableData: [],
    form: {} ,
    applyfriends: [],
  })

  // 拿后台数据
  const load = () => {
    request.get('user/page', {
      params: {
        username: username.value,
        address: address.value,
        pageNum: 1,
        pageSize: 10,
      }
    }).then(res => {
      console.log(res.data.records)
      if(res.data.records.length != 0){
        state.tableData = res.data.records
      }else {
        ElMessage.error("用户不存在")
      }
    })

  }

  // 保存
  const addUser = (index,id) => {
      request.request({
        url: '/apply',
        method:'post',
        data: state.tableData[index]
      }).then(res => {
        if (res.code === '200') {
          ElMessage.success('申请成功')
          // 刷新表格数据
        } else {
          ElMessage.error(res.msg)
        }
      })
  }


  const accept = (index,id) =>{
    request.request({
      url: '/friends',
      method:'post',
      data: state.applyfriends[index].user
    }).then(res => {
      console.log(state.applyfriends[index])
      if (res.code === '200') {
        ElMessage.success('添加成功')
        request.delete('/apply/' + state.applyfriends[index].id).then(res => {
          if (res.code === '200') {
            // ElMessage.success('移除申请成功')
          } else {
            ElMessage.error(res.msg)
          }
        })
        // 刷新表格数据
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  const refuse = (index,id) =>{
    request.delete('/apply/' + state.applyfriends[index].id).then(res => {
      if (res.code === '200') {
        ElMessage.success('拒绝成功')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }

  onMounted(() =>{
    request.get('/apply/hot',{
      params: {
        pageNum: 1,
        pageSize: 20
      }
    }).then(res => {
      state.applyfriends = res.data.records
      // console.log(res.data.records)
    })
  })




// 获取当前用户所有好友
const load2 = () => {
  request.get('/friends/hot', {
    params: {
      pageNum: 1,
      pageSize: 20
    }
  }).then(res => {
    state.addfriends = res.data.records
    console.log(res.data.records)
  })
}

load2()



let fid = ref('')

const getMessage = (fid) =>{
  request.get('/message/hot', {
    params: {
      fid: fid,
      pageNum: 1,
      pageSize: 300
    }
  }).then(res => {
    state.message = res.data.records
    console.log(res.data.records)

  })
}

// 点击对话，对话框变色
const startCall = (res)=>{
  console.log(res.fid)
  active.value = res.id
  fid =  res.fid
  getMessage(res.fid)
  router.push({ path:'chat',query:{fid:res.fid}})


}
</script>

<style scoped>

.w440{
  margin-top: 15px;
  width: 440px
}
.ml5{
  margin-top: 15px;
  margin-left: 5px;
}
.ml15{
  margin-bottom: 30px;
  margin-left: 330px;
}
.ml25{
  margin-top: 10px;
  margin-left: 280px;
}
.left-list{
  background-color: #eaeaea;
}
</style>